<template>
  <view class="main-container">
    <view class="hotel-title">
     <!-- <wd-icon name="thin-arrow-left" size="18px" @click="pageBack"></wd-icon>
      <view class="hotel-name">酒店民宿</view>
      <view style="width: 50rpx;"></view> -->
    </view> 
	<HeaderBar title="酒店民宿" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
    <view class="hotel-mian">
      <!-- 筛选栏 -->
      <FilterBar @updatePrice="updatePrice" @updateSort="updateSort" @updateArea="updateArea"/>

      <!-- 酒店列表 -->
      <view class="hotel-list" v-if="hotels.length != 0">
        <HotelCard v-for="hotel in hotels" :key="hotel.id" :hotel="hotel"/>
      </view>
	  <wd-status-tip v-if="hotels.length == 0" image="search" tip="当前搜索无结果" />
    </view>
  </view>
</template>

<script setup>
import HeaderBar from "@/components/HeaderBar/index.vue"; 
import {onLoad} from "@dcloudio/uni-app";
import datepicker from "@/components/DatePicker/date-picker.vue";
import {ref,reactive} from "vue";
import FilterBar from "@/hotelHomestay/components/FilterBar.vue";
import HotelCard from "@/hotelHomestay/components/HotelCard.vue";


const headerBgc = ref("transparent");
const titleColor = ref("#2D2D2D"); 
const pageBack = () =>{
  uni.navigateBack()
}
onPageScroll((e) => { 
	if (e.scrollTop > 110) {
		headerBgc.value = "#A7C6AC";
		titleColor.value = "#fff";
	} else {
		headerBgc.value = "transparent";
		titleColor.value = "#2D2D2D";
	}
})
const hotels = ref([]);
const select = ref([]);

function updateSort(val){
	switch (val) {
	    case "智能排序":
		hotels.value = select.value
	      break;
	    case "距离最近":
		hotels.value = select.value.filter(item => item.minPrice >= 0 && item.minPrice <= 100);
	      break;
	    case "价格最低":
		hotels.value = select.value.sort((a, b) => a.minPrice - b.minPrice);
	      break;
	    case "价格最高":
		hotels.value = select.value.sort((a, b) => b.minPrice - a.minPrice);
	      break;
	    case "评分最高":
		hotels.value = select.value.filter(item => item.minPrice >= 500);
	      break;
	} 
}
function updateArea(val){  
	console.log(val);
	hotels.value = select.value.filter(item => item.district == val.code);   
}
function updatePrice(val){  
	switch (val) {
	    case "全部":
	    case "价格筛选":
		hotels.value = select.value
	      break;
	    case "￥0-100":
		hotels.value = select.value.filter(item => item.minPrice >= 0 && item.minPrice <= 100);
	      break;
	    case "￥100-300":
		hotels.value = select.value.filter(item => item.minPrice >= 100 && item.minPrice <= 300);
	      break;
	    case "￥300-500":
		hotels.value = select.value.filter(item => item.minPrice >= 300 && item.minPrice <= 500);
	      break;
	    case "￥500以上":
		hotels.value = select.value.filter(item => item.minPrice >= 500);
	      break;
    } 
}

onLoad((options) => {
  if (options.res) {
    const res = JSON.parse(decodeURIComponent(options.res));
    hotels.value = res
    select.value = res 
  }
})
</script>


<style lang="scss" scoped>
.main-container{
  min-height: 100vh;
  background: linear-gradient(to bottom, #A7C6AC 0%, #fff 15%);

  .hotel-title{
    // border: 1px solid;
    height: 62rpx;
    display: flex;
    padding:13.5% 0 30rpx 20rpx;
    align-items: center;
  }
  .hotel-name{
    width: 100%;
    height: 100%;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 33rpx;
    color: #2B2B24;
    text-align: center;
    line-height: 60rpx;
  }
  .hotel-mian{
    // padding: 20rpx;

    .hotel-list {
      padding: 20px;
    }
  }

}
</style>
